<template>
    <div class="markContent">
      <el-button type="primary" size="small" class="addBtn" @click="editMark('add')"
                 v-if="jurisdiction.customer_addLabel">+ 新增标签
      </el-button>

      <div>
        <div class="list" v-for="(item,index) in markList" :key="index">

          <span :style="{backgroundColor: item.markColor}" size="small" class="label_btn">{{item.markName}}</span>

          <div class="icon">
                  <span class="icon-bianji" @click="editMark('edit', item.markName, item.markColor, item.id)"
                        v-if="jurisdiction.customer_editMark" style="cursor: pointer"></span>
            <span class="icon-delete_icon" @click="removeMark(item.id)" v-if="jurisdiction.customer_deleteLabel"
                  style="cursor: pointer"></span>
          </div>
        </div>
      </div>

      <el-dialog :visible.sync="mark_show" center append-to-body width="400px" :before-close="cancel">
        <p class="title" slot="title">{{markTitle}}</p>
        <div class="flex">
          <span>标签名称：</span>
          <el-input v-model="markName" autocomplete="off" style="width:230px" @keyup.enter.native="saveMark"
                    @change="filterNmae('markName')" maxlength="10" placeholder="最多输入10字"></el-input>
          <el-color-picker
            v-model="markColor"
            :predefine="colorArray">
          </el-color-picker>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel" size="small">取 消</el-button>
          <el-button type="primary" @click="saveMark" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {queryCustMark, editCustMark, deleteCustMark, saveCustMark} from "@/api/customer";
    export default {
        name: "mark",
        data() {
            return {
                jurisdiction:{},
                markList:[],
                markTitle:'',
                mark_show:false,
                colorArray:['#000000', '#BE5957', '#DA762F', '#139891', '#4A669F', '#595AC1', '#333333', '#E63C38', '#EC994D', '#5DBD7F', '#5B87ED', '#8D50BF', '#7B8291', '#F07A79', '#E3AE02', '#7EC65E', '#45A7EE', '#ACACAC'],
                markName:'',
                markColor:'#000000',
                markId:''
            }
        },
        computed: {
            ...mapGetters(["permission"]),
        },
        mounted() {
            this.jurisdiction = this.vaildData(this.permission)
        },
        methods:{
            filterNmae(type) {
                var RexStr = /\<|\>|\"|\'|\&/g
                if (this[type] != undefined) {
                    this[type] = this[type].replace(RexStr, '')
                }
            },
            init() {
                queryCustMark().then((res) => { // 查询公司分类
                    this.markList = res.data.data
                })
            },
            cancel() {
                this.markName = ''
                this.markColor = '#000000'
                this.markId = ''
                this.mark_show = false
            },
            editMark(type, name, color, id) {
                if(type == 'add') {
                    this.markTitle = '新增标签'
                }
                if(type == 'edit') {
                    this.markTitle = '编辑标签'
                    this.markName = name
                    this.markColor = color
                    this.markId = id
                }
                this.mark_show = true
            },
            removeMark(id) {
                this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "success"
                }).then(() => {
                    deleteCustMark(id).then(res => {
                        this.$message({
                            type:'success',
                            message: res.data.msg
                        })
                        this.init()
                    })
                })
            },
            saveMark() {
                if(this.markName !== '') {
                    if(this.markTitle === '新增标签') {
                        saveCustMark(this.markColor, this.markName).then(res => {
                            this.$message({
                                type:'success',
                                message: res.data.msg
                            })
                            this.cancel()
                            this.init()
                        })
                    } else {
                        editCustMark(this.markId, this.markColor, this.markName).then(res => {
                            this.$message({
                                type:'success',
                                message: res.data.msg
                            })
                            this.cancel()
                            this.init()
                        })
                    }
                } else {
                    this.$message({
                        type:'warning',
                        message:'请输入标签名称'
                    })
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .markContent{
    font-size: 13px;
  }
  .addBtn {
    position: absolute;
    right: 20px;
    top: -55px
  }
  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-right 20px; */
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 2px solid #F3F3F3;
    position: relative;
  }
  .list:hover {
    background: #E9F3FD;
  }

  .icon {
    font-size: 22px;
    width: 130px;
    display: flex;
    justify-content: space-around;
  }

  .title {
    text-align: center;
    color: #409eff;
    font-size: 15px;
    margin-bottom: 20px;
  }

  .flex {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .label_btn {
    color: white;
    display: inline-block;
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 8px;
    cursor: default;
  }
</style>
